<template>
	<view class="u-flex-col" style="height: calc(100vh - 210rpx);">
		<u-navbar>
			<template v-slot:right>
				<u-icon :name="userInfo.isCollected?'star-fill':'star'"
					size="42"
					:custom-style="{marginRight: '20rpx', width: '52rpx'}"
					@click="addCollect"></u-icon>
			</template>
		</u-navbar>
		<view class="user-info-box u-flex">
			<view class="u-flex-1">
				<view class="user-name">
					{{userInfo.realName}}
				</view>
				<view class="user-post">
					{{userInfo.positionName}}
				</view>
			</view>
			<u-avatar :text="userInfo.realName.substr(userInfo.realName.length - 2,1)" mode="circle" bg-color="#0071C5" color="#FFFFFF" size="130"></u-avatar>
		</view>
		<view class="tab-box">
			<u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
		</view>
		<view class="tab-context-box u-flex-1 u-flex-col">
			<scroll-view :scroll-y="true" style="overflow: scroll;">
				<template v-if="current === 0">
					<view class="info-item">
						<view class="info-label">
							部门
						</view>
						<view class="info-text">
							{{userInfo.orgName}}
						</view>
					</view>
					<view class="info-item">
						<view class="info-label">
							手机
						</view>
						<view class="info-text" @click="call(userInfo.phoneNo)">
							{{userInfo.phoneNo||'暂无'}}
						</view>
					</view>
					<view class="info-item" @click="call(userInfo.landlineNo)">
						<view class="info-label">
							座机
						</view>
						<view class="info-text">
							{{userInfo.landlineNo||'暂无'}}
						</view>
					</view>
					<view class="info-item">
						<view class="info-label">
							办公邮箱
						</view>
						<view class="info-text">
							{{userInfo.email||'暂无'}}
						</view>
					</view>
					<view class="info-item">
						<view class="info-label">
							员工类型
						</view>
						<view class="info-text">
							{{userInfo.employType||'暂无'}}
						</view>
					</view>
				</template>
				<template v-else-if="current === 1">
					<view class="u-p-30">
						<template v-for="(item, i) in managerChain">
							<view class="manger-item u-flex" :key="i">
								<u-image width="44" height="44" src="/static/icons/manger-icon.png"></u-image>
								<view class="manger-name" :class="{active: i === managerChain.length - 1}">{{item.name}}</view>
								<view class="u-flex-1 manger-post">{{item.positionName}}</view>
							</view>
							<view class="manger-trunk" v-if="i !== managerChain.length - 1" :key="'t'+i"></view>
						</template>
					</view>
				</template>
				<template v-else>
					<view class="subuser-num">{{subUser.length > 0 ? `${subUser.length}个` : '无'}}直接下属</view>
					<view class="message-list-item" v-for="(item, i) in subUser" :key="i">
						<view class="message-icon">
							<u-avatar :text="item.name.substr(item.name.length -1, 1)" mode="circle" bg-color="#0071C5" color="#FFFFFF"></u-avatar>
						</view>
						<view class="message-content">
							<view class="message-type-title">
								<view class="u-flex-1">
									{{item.name}}
								</view>
							</view>
							<view class="message-item u-line-1">
								{{item.orgName}}/{{item.positionName}}
							</view>
						</view>
					</view>
				</template>
			</scroll-view>
		</view>
		<view class="send-btn-box">
			<!-- <u-button :custom-style="btnStyle" shape="circle">发消息</u-button> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {
					realName: ''
				},
				managerChain: [],
				subUser: [],
				list: [
					{
						name: '基本信息'
					},
					{
						name: '汇报关系'
					},
					{
						name: '直接下属'
					}
				],
				current: 0,
				btnStyle: {
					height: '90rpx',
					color: '#FFFFFF',
					background: 'linear-gradient(90deg, #22ABEC 0%, #0071C5 100%)'
				}
			}
		},
		methods: {
			change(index) {
				this.current = index
			},
			addCollect() {
				this.$u.api.setFavorite(this.userInfo.userId).then(res => {
					this.userInfo.isCollected = !this.userInfo.isCollected
				}).catch(err => {
					console.log(err)
				})
			},
			call(pPN) {
				if (pPN) {
					uni.makePhoneCall({
					    phoneNumber: pPN //仅为示例
					});
				}
			}
		},
		onLoad(option) {
			if (option.id) {
				this.$u.api.getContactsInfo(option).then(res => {
					this.userInfo = res
					console.log(res)
					this.$u.api.getManagerChain({userId: option.id}).then(res => {
						this.managerChain = res.reverse()
					}).catch(err => {
						console.log(err)
					})
					this.$u.api.findSubUser({userId: option.id}).then(res => {
						this.subUser = res
					}).catch(err => {
						console.log(err)
					})
					this.$u.api.addRecent(option.id).then(res => {
						console.log(res)
					}).catch(err => {
						console.log(err)
					})
				}).catch(err => {
					console.log(err)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.user-info-box {
		padding: 40rpx 30rpx;
		background-color: #FFFFFF;
		.user-name {
			padding: 20rpx 0;
			font-size: 40rpx;
			font-weight: bold;
			color: #333333;
		}
		.user-post {
			font-size: 24rpx;
			color: #999999;
		}
	}
	.tab-box {
		margin-top: 20rpx;
		margin-bottom: 2rpx;
	}
	.tab-context-box {
		position: relative;
		margin-top: 4rpx;
		padding: 0 30rpx;
		background-color: #FFFFFF;
	}
	.send-btn-box {
		position: fixed;
		bottom: 0;
		padding: 60rpx 30rpx;
		height: 210rpx;
		width: 100%;
	}
	.info-item {
		padding-top: 20rpx;
		border-bottom: 1px solid #F7F8FA;
		.info-label {
			line-height: 50rpx;
			font-size: 24rpx;
			font-weight: bold;
			color: #999999;
		}
		.info-text {
			padding-bottom: 20rpx;
			font-size: 30rpx;
			font-weight: bold;
			color: #333333;
		}
	}
	.manger-item {
		height: 39rpx;
		.manger-name {
			width: 150rpx;
			font-size: 24rpx;
			font-weight: bold;
			text-align: center;
			color: #999999;
		}
		.manger-name.active {
			color: #0272C5;
		}
		.manger-post {
			font-size: 28rpx;
			font-weight: bold;
			color: #333333;
		}
	}
	.manger-trunk {
		margin-left: 20rpx;
		width: 2rpx;
		height: 79rpx;
		border: 3rpx solid #0272C5;
	}
	.subuser-num {
		padding: 30rpx;
		text-align: center;
		font-size: 24rpx;
		color: #BEBEBE;
	}
	
	.message-list-item {
		display: flex;
		margin-bottom: 20rpx;
		.message-icon {
			position: relative;
			width: 88rpx;
			height: 88rpx;
		}
		.message-content {
			flex: 1;
			width: 0;
			padding-left: 20rpx;
			border-bottom: 1px solid #F7F8FA;
			.message-type-title {
				display: flex;
				font-size: 32rpx;
				font-weight: bold;
				.message-time {
					width: 100rpx;
					text-align: center;
					font-size: 24rpx;
					color: #CCCCCC;
				}
			}
			.message-item {
				width: 100%;
				padding-bottom: 20rpx;
				font-size: 24rpx;
				color: #999999;
			}
		}
	}
</style>
